<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="950px" confirmButtonText="" cancelButtonText="">
			<el-form ref="formRef" :model="formData" label-width="0px">
				<el-form-item label="">
					<table class="dataTable" border="0" cellspacing="0">
						<tbody>
							<tr>
								<th>工位</th>
								<th>姓名</th>
								<th>身份证正面</th>
								<th>身份证反面</th>
								<th>手机号</th>
								
							</tr>
							<tr v-for="(item,index) in formData.seat_info" :key="'seat_info'+index">
								<td>{{item.seat_name}}</td>
								<td>{{item.realname}}</td>
								<td>
									<!-- <el-avatar :src="[item.idcardpic]" :size="58" /> -->
									 <div class="middle">
										<el-image fit="contain" style="width: 58px; height: 58px"
											:src="item.idcardpic" :preview-teleported="true" :preview-src-list="[item.idcardpic]">
											<template #error>
												<span>暂无照片</span>
											</template>
										</el-image>
									 </div>
								</td>
								<td>
									<!-- <el-avatar :src="[item.idcardpic_back]" :size="58" /> -->
									<div class="middle">
										<el-image fit="contain" style="width: 58px; height: 58px"
											:src="item.idcardpic_back" :preview-teleported="true" :preview-src-list="[item.idcardpic_back]">
											<template #error>
												<span>暂无照片</span>
											</template>
										</el-image>
									</div>
								</td>
								<td>{{item.phone}}</td>
							</tr>
						</tbody>
					</table>
				</el-form-item>
				<el-form-item>
					<el-button type="danger" @click="handleClose()">审核驳回</el-button>
					<el-button type="primary" @click="handleSubmit()">审核通过</el-button>
				</el-form-item>
			</el-form>
		</popup>
		<check_demand ref="checkDemand" v-model:show="formData.show" :value="formData.value" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>
<script lang="ts" setup>
	import type { FormInstance } from 'element-plus'
	import Popup from '@/components/popup/index.vue';
	import { getMsgInfo, authMsg } from '@/api/sharedoffice/orderlists';
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef<FormInstance>()
	const popupRef = shallowRef<InstanceType<typeof Popup>>()
	import check_demand from './check_demand.vue'
	const checkDemand = shallowRef<InstanceType<typeof check_demand>>();
	const popupTitle = computed(() => {
		return '工位信息审核'
	})

	const formData = reactive({
		id: null,
		seat_info: [] as any,
		show: false,
		value: '',
	})
	
	const getDetail = async (arr: any,id: null) => {
		formData.id = id;
		try{
			const data = await getMsgInfo({id:id});
			formData.seat_info = data || [];
		}catch(e){
			formData.seat_info = [];
		}
	}
	
	const handleSubmit = async () => {
		formData.show = true;
		formData.value = '3';
		// checkDemand.value?.open();
	}
	
	const handleClose = () => {
		formData.show = true;
		formData.value = '4';
		// checkDemand.value?.open();
	}
	
	const handleConfirmCheck = async (value : any) => {
		await authMsg({id: formData.id, status: value.check_status, notice: value.reason});
		popupRef.value?.close()
		formData.show = false
		emit('success')
	}
	
	const open = () => {
		popupRef.value?.open()
	}

	defineExpose({ open, getDetail })
</script>

<style scoped lang="scss">
.middle{
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>